<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<script>
// 作用域：

// 已学过的两种作用域：全局作用域、 函数作用域


/* 
1. 全局作用域是，即 html - <script> 下，最外层的作用域。
2. 函数作用域：
  注：函数作用域是 可以「嵌套」的。


「作用域」的 作用：确定 变量的值是什么。


「作用域」如何确定 变量的值是什么？
  1.子级作用域中的变量，先在 自己的作用域中，通过就近原则，确定其变量的值。
  2.若自己的作用域中没有该变量，会向上层作用域中寻找其变量值；
    若一直找到全局作用域，也无法找到该变量的声明；则报 not defined 的错误。
  3.作用域变量值的确定，只能由子级向上级寻找；反之则不行。

*/



// 下面的代码，其作用域 形成了一个『嵌套关系』：
  // 全局作用域 ，嵌套了 f的作用域；
    // f的作用域，嵌套了 innerF 的作用。

// 此种情景，就形成了一个『作用域链』：
  // 全局作用域  ->  f作用域  -> innerF作用域
function f(i) {

  console.log(i); // 会报 not defined 的错误；因为 父级作用域 无法 获取子级作用域的变量声明。
  // 花括号里面，即为 函数 f 的作用域

  function innerF(i) {
    // 粉色的花括号，为 函数 innerF 的作用域
    var i = 123;
    console.log(i); // 123;
  }

  innerF(33);

}

</script>